<template>
    <div>
        <section class="py-20">
        <div class="china_data">
    <div ref="myChart" id="myChart"></div>
  </div>
      </section>
    </div>
</template>

<script  setup>
import { onMounted, ref, onUnmounted, computed } from "vue";
import * as echarts from "echarts";
import china from "@/assets/china.json" //中国地图
const myChart=ref(null)
onMounted(()=>{
    const chart = echarts.init(myChart.value)

const data = [
  { name: "北京", value: [116.24, 39.55, 100] },
  { name: "深圳", value: [114.271522, 22.753644] },
  { name: "重庆", value: [106.54, 29.59] },
  { name: "浙江", value: [120.19, 30.26] },
  { name: "上海", value: [121.4648, 31.2891] },
  { name: "佛山", value: [112.877162, 23.160295] }
]
const LineData = [
  {
    fromName: '北京',
    toName: '深圳',
    coords: [[116.24, 39.55], [114.271522, 22.753644]],
    value: 100
  },
  {
    fromName: '北京',
    toName: '重庆',
    coords: [[116.24, 39.55], [106.54, 29.59]],
    value: 100
  },
  {
    fromName: '上海',
    toName: '深圳',
    coords: [[121.4648, 31.2891], [114.271522, 22.753644]],
    value: 100
  },
  {
    fromName: '北京',
    toName: '佛山',
    coords: [[116.24, 39.55], [112.877162, 23.160295]],
    value: 100
  }
]

echarts.registerMap('china', china)
const option = {
  geo: {
    type: 'map',
    map: 'china',
    zoom: 1.7,
    top: "30%",
    roam: 'scale',
    label: {
      normal: {
        show: true,
        fontSize: "10",
        color: "white",
      },
      emphasis: {
        show: true,
        textStyle: {
          color: "white",
          fontSize: "14px",
        },
      },
    },
    itemStyle: {
      normal: {
        borderColor: "#31FFFF",
        areaColor: "#306eb4",
        borderWidth: 2,
        shadowColor: '#276fce',
        shadowOffsetX: 0,
        shadowOffsetY: 10,
        opacity: 1,
      },
      emphasis: {
        areaColor: "red",
        shadowOffsetX: 0,
        shadowOffsetY: 10,
        shadowBlur: 0,
        borderWidth: 0,
        opacity: 1,
      },
    },
  },
  series: [
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      symbolSize: 10,
      rippleEffect: {
        period: 3,
        scale: 5,
        brushType: 'fill'
      },
      data: data,
      itemStyle: {
        normal: {
          show: true,
          color: '#31FFFF',
          shadowBlur: 20,
          shadowColor: '#fff'
        },
        emphasis: {
          areaColor: '#f00'
        }
      },
    },
    {
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 6,
        trailLength: 0,
        symbol: 'circle',
        symbolSize: 16,
        color: '#31FFFF',
      },
      lineStyle: {
        normal: {
          color: '#fff',
          type: 'solid',
          width: 2,
          opacity: 1,
          curveness: 0.2,
        },
        emphasis: {
          color: '#FF9600'
        }
      },
      label: {
        normal: {
          show: false,
          position: 'middle',
          formatter: '{b}'
        }
      },
      data: LineData
    }
  ],
}
chart.setOption(option)
})
</script>

<style>
.china_data {
  width: 737px;
  height: 500px;

  #myChart {
    width: 700px;
    height: 480px;
  }
}</style>